<template>
  <div>
    <remote-css href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css"></remote-css>
    <remote-js src="https://getbootstrap.com/docs/5.0/dist/js/bootstrap.bundle.min.js"></remote-js>
    <Header></Header>

    <main>

      <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
        <ol class="carousel-indicators">
          <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
          <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
          <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://cosy.demo.nicetheme.xyz/style1/wp-content/uploads/sites/2/2020/08/2020082618051514.jpg" class="d-block w-100">
            <div class="container">
              <div class="carousel-caption text-start">
                <h1>一个MarkDown的创作平台.</h1>
                <p class="lead">一种新的生活方式、新的工作方式和新的学习方式.</p>

                <p><a class="btn btn-lg btn-primary" href="/Login" role="button">Sign In</a></p>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <img src="https://gitee.com/caohonghai8/Images/raw/master/blog/20201224151613.jpg" class="d-block w-100">
            <div class="container">
              <div class="carousel-caption">
                <h1>共享知识.</h1>
                <p>常常是记录下来都是瞬间的灵感，对事物的感
                  悟，经过多日思考和实践的结果，对某个问题的解决方案等等，这些都是财
                  富，要记录下来。</p>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <img src="https://gitee.com/caohonghai8/Images/raw/master/blog/20201224152705.jpg" class="d-block w-100">
            <div class="container">
              <div class="carousel-caption ">
                <h1>自由表达.</h1>
                <p>以网络作为载体，简易迅速便捷地发布自己的心得，及时有效轻松
                  地与他人进行交流，再集丰富多彩的个性化展示于一-体的综合性平台.</p>
              </div>
            </div>
          </div>
        </div>
        <a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </a>
        <a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </a>
      </div>

      <!-- Marketing messaging and featurettes
  ================================================== -->
      <!-- Wrap the rest of the page in another container to center all the content. -->

      <div class="container marketing">
        <!-- START THE FEATURETTES -->

        <div class="row featurette">
          <div class="col-md-7">
            <h2 class="featurette-heading">标题1.</h2>
            <p class="lead">介绍1.</p>
          </div>
          <div class="col-md-5">
            <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500"
              xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice"
              focusable="false">
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#eee" /><text x="50%" y="50%" fill="#aaa" dy=".3em">tupian</text>
            </svg>

          </div>
        </div>

        <hr class="featurette-divider">

        <div class="row featurette">
          <div class="col-md-7 order-md-2">
            <h2 class="featurette-heading">标题2.</h2>
            <p class="lead">介绍2.</p>
          </div>
          <div class="col-md-5 order-md-1">
            <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500"
              xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice"
              focusable="false">
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#eee" /><text x="50%" y="50%" fill="#aaa" dy=".3em">图片</text>
            </svg>

          </div>
        </div>

        <hr class="featurette-divider">

        <div class="row featurette">
          <div class="col-md-7">
            <h2 class="featurette-heading">标题3.</h2>
            <p class="lead">介绍3.</p>
          </div>
          <div class="col-md-5">
            <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500"
              xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice"
              focusable="false">
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#eee" /><text x="50%" y="50%" fill="#aaa" dy=".3em">图片</text>
            </svg>

          </div>
        </div>

        <hr class="featurette-divider">

        <!-- /END THE FEATURETTES -->

      </div><!-- /.container -->
    </main>

  </div>
</template>

<script>
import Header from "../components/Header";

export default {
  components: {
    'remote-css': {
      render (createElement) {
        return createElement('link', { attrs: { rel: 'stylesheet', href: this.href } });
      },
      props: {
        href: { type: String, required: true },
      },
    },
    'remote-js': {
      render (createElement) {
        return createElement('script', { attrs: { type: 'text/javascript', src: this.src } });
      },
      props: {
        src: { type: String, required: true },
      },
    },
    Header
  },
  name: "Index.vue",
  data () {
    return {

    }
  },
  methods: {

  },
  created () {
  }
}
</script>

<style scoped>
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: #5a5a5a;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
}

/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: 0.75rem;
  margin-left: 0.75rem;
}
/* rtl:end:ignore */

/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  /* rtl:remove */
  letter-spacing: -0.05rem;
}

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}
.banner {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
</style>